<template>
  <div class="cycle">
    <div v-for="i in num" class="cycle-single" :style="{
        'animation-duration': `${time}s`
      }">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    time: {
      type: Number,
      default: 10,
    },

    paused: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    // 防止数据过少
    comStyle() {
      if (this.paused) {
        return "";
      } else {
        return {
          animation: `move ${this.time}s infinite linear`,
        };
      }
    },

    num() {
      if (this.paused) {
        return 1;
      } else {
        return 2;
      }
    },
  },
  methods: {

  },
  mounted() {

  },
};
</script>

<style lang="scss" scoped>
.cycle {
  width:100%;
  height: 100%;
  & > div {
    //display:list-item;
    width: 100%;
    animation: move 10s infinite linear;
    margin:0;
    padding:0;
  }

  &:hover {
    & > div {
      animation-play-state: paused;
    }
  }
}
</style>
